<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui" dir="ltr" lang="en-US">
	<head>
    <meta charset="utf-8"/>
    <title>Birthdays</title>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width"/>

    <link rel="stylesheet" href="CSS/style.css" media="screen"/>
    <link rel="stylesheet" href="CSS/style.responsive.css" media="all"/>
	<link rel="stylesheet" type="text/css" href="CSS/StyleSheet.css" />

    <script src="JavaScript/jquery.js"></script>
    <script src="JavaScript/script.js"></script>
    <script src="JavaScript/script.responsive.js"></script>
	<script type="text/javascript">	
		function check()
		{
			var msg = "#{sessionScope['returnMsg']}";
		 	if(msg == "success") {
		 		alert("You have successfully registered.\nPlease check below.")
		 	}
		}
	</script>
<meta name="description" content="Description"/>
<meta name="keywords" content="Keywords"/>



</head>
<body onload="check();">
<div id="art-main">
		<header class="art-header">
			<div class="art-shapes">
				<h1 class="art-headline" data-left="32.49%">
					<a href="#">Travelport Birthday Calendar</a>
				</h1>
				<h2 class="art-slogan" data-left="28.44%">Celebrate and enjoy your birthday in style..!</h2>
				<!-- div class="art-object0" data-left="0%"></div-->
				<div class="art-object1834517147" data-left="0%"></div>
				<nav class="art-nav">
					<ul class="art-hmenu">
						<li><a href="index.xhtml">Home</a></li>
						<li><a href="birthdays.xhtml" class="active">Birthdays</a></li>
						<li><a href="register.xhtml">Register</a></li>
						<li><a href="gallery.xhtml">Gallery</a></li>
						<li><a href="contact.xhtml">Contact Us</a></li>
					</ul>
				</nav>
			</div>
		</header>
		<div class="art-sheet">
            <div class="art-layout-wrapper">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content"><article class="art-post art-article">
                                
                                                
                <div class="art-postcontent art-postcontent-0"><div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-0" style="width: 33%" >
        <p style="text-align: center;"><img width="128" height="128" alt="" src="images/1300111886_bouquet.png" style="float:left;margin:10px;padding-right:10px;" class=""/></p>
        <h:form rendered="#{fetchdata.allUsers.isRowAvailable()}">
		<h:outputText value="Sort By:" />
		<h:selectOneMenu id="sort" value="#{fetchdata.sort}">
			<f:selectItem itemLabel="Name" itemValue="Name" />
			<f:selectItem itemLabel="DOB" itemValue="DOB" />
		</h:selectOneMenu>
		<h:outputText value="Order By:" />
		<h:selectOneMenu id="order" value="#{fetchdata.order}">
			<f:selectItem itemLabel="Asc" itemValue="Asc" />
			<f:selectItem itemLabel="Desc" itemValue="Desc" />
		</h:selectOneMenu>
		<h:commandButton update="dataBox2" 
			action="#{fetchdata.handleChoiceChange()}" value="Sort" class="art-button"/>
		<h:panelGrid id="dataBox2" columns="4" style="width:auto">
			<h:dataTable value="#{fetchdata.allUsers}" var="u"
				style="border: 1px solid silver" styleClass="user-table"
    			headerClass="user-table-header"
    			rowClasses="user-table-odd-row,user-table-even-row">
				<h:column>
					<f:facet name="header">Name</f:facet>
					<h:outputText value="#{u.name}" style="width:300px"/>
				</h:column>
				<h:column>
					<f:facet name="header">Email</f:facet>
					<h:outputText value="#{u.email}" style="width:40%"/>
				</h:column>
				<h:column>
					<f:facet name="header">DOB Month</f:facet>
					<h:outputText value="#{u.dobMonthString}" style="width:15%"/>
				</h:column>
				<h:column>
					<f:facet name="header">Dob Date</f:facet>
					<h:outputText value="#{u.dobDateString}" style="width:15%"/>
				</h:column>
			</h:dataTable>
		</h:panelGrid>
	</h:form>
	<h:outputText rendered="#{!fetchdata.allUsers.isRowAvailable()}">
		<h4>No registered user.</h4>
	</h:outputText>
    </div>
    </div>
</div>
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-0" style="width: 100%" >
    </div>
    </div>
</div>
</div>
                                
                </article></div>
                        <div class="art-layout-cell art-sidebar1 clearfix"><div class="art-block clearfix">
        <div class="art-blockheader">
            <h3 class="t">Upcoming Birthdays</h3>
            <h3 class="t">In next two weeks</h3>
        </div>
        <div class="art-blockcontent">
        	<h:panelGrid id="dataBox2" columns="2" style="width:auto" rendered="#{fetchdata.getUpcomingUsers().isRowAvailable()}">
				<h:dataTable value="#{fetchdata.getUpcomingUsers()}" var="u"
					style="border: 1px solid silver" styleClass="user-table"
	    			headerClass="user-table-header"
	    			rowClasses="user-table-odd-row,user-table-even-row">
					<h:column>
						<f:facet name="header">Name</f:facet>
						<h:outputText value="#{u.name}" />
					</h:column>
					<h:column>
						<f:facet name="header">Date</f:facet>
						<h:outputText value="#{u.combinedDate}" />
					</h:column>
				</h:dataTable>
			</h:panelGrid>
			<h:outputText rendered="#{!fetchdata.getUpcomingUsers().isRowAvailable()}">
				<h5>No one to celebrate in next two weeks.</h5>
			</h:outputText>
		</div>
</div></div>
                    </div>
                </div>
            </div>
    </div>
		<footer class="art-footer">
		<div class="art-footer-inner">
			<div style="position: relative; display: inline-block; padding-left: 39px; padding-right: 39px">
				<p>
					<a href="index.xhtml">Home</a> | <a href="birthdays.xhtml">Birthdays</a> | <a href="register.xhtml">Register</a> | <a href="gallery.xhtml">Gallery</a> | <a href="contact.xhtml">Contact Us</a>
				</p>
				<p>Copyright © 2014. All Rights Reserved.</p>
			</div>
		</div>
		</footer>

</div>


</body></html>